/**
 * Created by sunguodong on 2021/12/31.
 * Email: sungd@tongtech.com
 * Description: ArGIS 地图中的应用方法
*/

import './index.less';
import React, {useEffect} from "react";
import * as esriLoader from 'esri-loader';
import { Button } from "antd";
import icon from "../../image/gis_5g_station_normal.svg";
const options = {   
    url: 'https://js.arcgis.com/3.39/',
}
esriLoader.loadScript(options);

export const MapBasicMarkupOverlays: React.FC = () => {
    function componentDid() {

        esriLoader.loadModules([
            'esri/map',
            "dojo/dom",
            "dojo/on",
            "esri/geometry/Point",
            "esri/symbols/PictureMarkerSymbol",
            "esri/graphic",
            "esri/InfoTemplate",
            "esri/symbols/SimpleMarkerSymbol",
            "esri/symbols/SimpleLineSymbol",
            "esri/Color",
            "esri/dijit/Search",
            "esri/SpatialReference",
            "esri/symbols/Font",
            "esri/symbols/TextSymbol",
        ]).then(([Map, dom, on, Point, PictureMarkerSymbol, Graphic, InfoTemplate, SimpleMarkerSymbol, SimpleLineSymbol, Color, Search, SpatialReference, Font, TextSymbol]) => {
            const map = new Map('mapCon', {
                basemap: 'topo-vector',
                center: [116.403414, 39.924091],
                zoom: 13
            });
            on(dom.byId('addSimpleMarkerSymbol'), 'click', addSimpleMarkerSymbol);
            on(dom.byId('addPictureMarkerSymbol'), "click", addPictureMarkerSymbol);
            on(dom.byId('addTextSymbol'), "click", addTextSymbol);
            on(dom.byId('addSimpleFillSymbol'), "click", addSimpleFillSymbol);
            on(dom.byId("clearAll"), "click", clearAll);

            function addSimpleMarkerSymbol () {
                map.graphics.clear();
                var picSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_SQUARE, 1000,
                    new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
                    new Color([255,0,0]), 1),
                    new Color([0,255,0,0.25]));
                var newPoint = new Point(116.403414, 39.924091);
                var picGraphic = new Graphic(newPoint, picSymbol);
                map.graphics.add(picGraphic);
            }

            function addPictureMarkerSymbol () {
                map.graphics.clear();
                var newPoint = new Point(116.403414, 39.924091);
                var picSymbol = new PictureMarkerSymbol(icon, 50, 50);
                var picGraphic = new Graphic(newPoint, picSymbol);
                var infoTemplate = new InfoTemplate();
                infoTemplate.setTitle("更新后的");
                infoTemplate.setContent('<div>更新后的一颗绿油油的树</div>');
                picGraphic.setInfoTemplate(infoTemplate);
                map.graphics.add(picGraphic);
            }

            var search = new Search({
                enableLabel: true,
                enableInfoWindow: false,
                map: map
            }, "");
 
            search.startup();
 
            function addTextSymbol() {
                map.graphics.clear();
                var geo = new Point(116.403414, 39.924091, new SpatialReference({
                   wkid: 4326
                }));
                //highlight symbol
                var symbol = new PictureMarkerSymbol(icon, 50, 50);
                //labeling text symbol
                var ls = new TextSymbol().setColor(new Color([181, 56, 46, 0.9])).setFont(new Font("24px", Font.STYLE_NORMAL, Font.VARIANT_NORMAL, Font.WEIGHT_BOLD, "Arial")).setOffset(11, -5).setAlign(TextSymbol.ALIGN_START);
                //No sources are explicitely set so will default to ArcGIS Online World geocoding service
                search.sources[0].highlightSymbol = symbol; //set the symbol for the highlighted symbol
                search.sources[0].labelSymbol = ls; //set the text symbol for the label
 
                //performs a reverse geocode 
                search.search(geo);
            }

            function addSimpleFillSymbol () {
                map.graphics.clear();
                var sls = new SimpleLineSymbol(
                    SimpleLineSymbol.STYLE_DASH,
                    new Color([255,0,0]),
                    3000
                );
                var newPoint = new Point(116.403414, 39.924091);
                var picGraphic = new Graphic(newPoint, sls);
                map.graphics.add(picGraphic);
            }
            function clearAll () {
                map.graphics.clear();
            }
        }).catch(err => {
            console.error(err)
        })
    }
    
    useEffect(() => {
        return componentDid();
    }, []);

    function componentWillUn() {}

    useEffect(() => () => {
        return componentWillUn();
    }, []);

    return (
        <div id="mapCon">
            <div className={'div-option'} style={{position: 'absolute', right: '3%', top: '3%', display: 'grid', zIndex: 9999}}>
                <Button type={'primary'} id="addSimpleMarkerSymbol">SimpleMarkerSymbol</Button>
                <Button type={'primary'} id="addPictureMarkerSymbol">PictureMarkerSymbol</Button>
                <Button type={'primary'} id="addTextSymbol">TextSymbol</Button>
                <Button type={'primary'} id="addSimpleLineSymbol">SimpleLineSymbol</Button>
                <Button type={'primary'} id="addSimpleFillSymbol">SimpleFillSymbol</Button>
                <Button type={'primary'} id="addPictureFillSymbol">PictureFillSymbol</Button>
                <Button type={'primary'} id="clearAll">清除全部</Button>
            </div>
        </div>
    )
}
